<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center">
        <div class="main-left " style="height: 800px;">
          <div class="t-title bor-b"><h3>建议反馈</h3></div>
          <div class="conn mt0">
            <div class="clear"></div>
            <ul class="form-area mt0">
              <li>
                <span class="tit">
                  <label class="red">*</label>
                  反馈类型：
                </span>
                <div class="r-text">
                  <el-select style="width: 100%;" v-model="form.type" filterable allow-create default-first-option placeholder="请选择">
                    <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
              </li>
              <li><el-input type="textarea" placeholder="请输入您反馈的信息" v-model="form.content" maxlength="200" rows="8" show-word-limit></el-input></li>
              <li style="margin-top: 30px;">
                <template v-for="(vo, j) in fileList">
                  <div class="pic-list-fb">
                    <img :src="vo.cdnUrl" height="70" alt="" />
                    <label class="del" @click="delLi(j, vo.id)"></label>
                  </div>
                </template>
                <el-upload
                  style="float: left;"
                  class="upload-demo"
                  ref="upload"
                   :action="uploadUrl"
                  :on-success="handleUpSuccess"
                  :before-upload="beforeUpload"
                  :show-file-list="false"
                  :auto-upload="true"
                  :file-list="fileList"
                >
                  <img src="static/img/add-pic2.png" height="70" alt="" v-show="fileList.length < 5" />
                </el-upload>
                <p style="clear: both;">最多上传5张图片，每张图片大小不能超过2M</p>
              </li>
              <li>
                <span class="tit">联系方式：</span>
                <div class="r-text"><el-input v-model="form.contact" placeholder="请输入手机号/QQ号/邮箱"></el-input></div>
              </li>
            </ul>

            <div class="mt30"><el-button @click="handleAdd()">提交反馈</el-button></div>
          </div>
        </div>
        <div class="main-right ">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img"><img src="static/img/r-back.png" alt="" /></div>
            <div class="menu-item">返回</div>
          </div>
          <div class="con-menu2" @click="goHome()">
            <div class="menu-img"><img src="static/img/r-home.png" alt="" /></div>
            <div class="menu-item">首页</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../components/header.vue';
export default {
  data() {
    return {
      input: '',
      uploadUrl:  this.$brid+ '/api/common/oss_upload',
      typeOptions: [
        {
          value: '1',
          label: '功能bug'
        },
        {
          value: '2',
          label: '体验问题'
        },
        {
          value: '3',
          label: '使用建议'
        },
        {
          value: '4',
          label: '其他'
        }
      ],
      value: [],
      value2: [],
      fileList: [],
      isbind: true,
      form: {
        content: '',
        type: '3',
        images: '',
        contact: '',
        platform: 'PC'
      }
    };
  },
  created() {},
  methods: {
    beforeUpload(file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg'|| file.type ==='image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('只能上传图片');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }
    // / return isJPG && isLt2M;
    },
    handleUpSuccess(res, file) {
      if (this.fileList.length < 5) {
        this.fileList.push(res.data);
        console.log('this.fileList====>>>');
        console.log(this.fileList);
      }
    },
    delLi(index, fileList) {
      this.fileList.splice(index, 1);
    },
    handleAdd() {
      
      if (!this.form.content.trim()||this.form.type=='') {
        this.$message.error('反馈类型和反馈信息不能为空');
        return;
      }
      if (this.form.contact.trim()) {
        let oVal = this.form.contact;
        var myreg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (!myreg.test(oVal)) {
          if (!isNaN(oVal)) {
            if ( oVal.length == 11 ) {
              if(!(/^1[2345789]\d{9}$/.test(oVal))) {
                this.$message.error('请输入正确的手机号');
              }
              return;
            }
          }else{
            this.$message.error('请输入正确的手机号/QQ号');
            return;
          }
        }
      }

      var images = [];
      for (var i = 0; i < this.fileList.length; i++) {
        var json = this.fileList[i];
        images.push(json.cdnUrl);
      }
      this.form.images = images.join(',');
      this.$api('feedback.add', this.form).then(res => {
        if (res.code == 1) {
          this.form.contact = '';
          this.form.content = '';
          this.form.images = '';
          this.form.type = '3';
          this.fileList = [];
          this.$message.success(res.msg);
        } else if (res.code == 0) {
          this.$message({
            message: '当前无网络，请刷新网络后重试',
            type: 'warning'
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    goHome() {
		  this.$router.push(localStorage.getItem('jump_path'));
     // this.$router.push('/index');
    },
    goProfile() {
      this.$router.push('/profile');
    },
    goSetting() {
      this.$router.push('/setting');
    },
    openDigBind() {
      this.data.isbind = true;
    },
    openChaPwd() {
      this.data.isChaPwd = true;
    }
  },
  components: { Header }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url(/static/img/bg.png) no-repeat center;
  background-size: 100% 100%;
}
</style>
